<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中性灰色系配色系统 | 简约时尚风格</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        // 中性灰色系列 - 从浅到深
                        neutral: {
                            50: '#fafafa',    // 最浅背景色
                            100: '#f5f5f5',   // 卡片背景
                            200: '#e5e5e5',   // 边框、分割线
                            300: '#d4d4d4',   // 禁用状态
                            400: '#a3a3a3',   // 次要文本
                            500: '#737373',   // 中等强调文本
                            600: '#525252',   // 主要文本
                            700: '#404040',   // 标题文本
                            800: '#262626',   // 深色背景
                            900: '#171717',   // 最深背景
                        },
                        // 强调色 - 用于突出重要元素
                        accent: {
                            blue: '#3b82f6',    // 主要强调色-蓝色
                            slate: '#64748b',   // 次要强调色-石板灰
                            amber: '#f59e0b',   // 警示强调色-琥珀色
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-balance {
                text-wrap: balance;
            }
        }
    </style>
    
    <style>
        /* 导入Inter字体 */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Inter', sans-serif;
        }
        
        /* 平滑滚动 */
        html {
            scroll-behavior: smooth;
        }
        
        /* 颜色块悬停效果 */
        .color-swatch {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .color-swatch:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body class="bg-neutral-50 text-neutral-600">
    <!-- 导航栏 -->
    <header class="sticky top-0 z-50 bg-white/90 backdrop-blur-sm border-b border-neutral-200">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <span class="text-xl font-semibold text-neutral-800">Neutral<span class="text-accent-blue">UI</span></span>
                </div>
                <nav class="hidden md:flex space-x-8">
                    <a href="#colors" class="text-neutral-600 hover:text-accent-blue transition-colors">配色系统</a>
                    <a href="#components" class="text-neutral-600 hover:text-accent-blue transition-colors">组件示例</a>
                    <a href="#application" class="text-neutral-600 hover:text-accent-blue transition-colors">应用展示</a>
                </nav>
                <div class="md:hidden">
                    <button type="button" class="text-neutral-600 hover:text-accent-blue">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- 英雄区域 -->
    <section class="py-16 md:py-24 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="max-w-3xl mx-auto text-center">
                <h1 class="text-4xl md:text-5xl font-bold text-neutral-800 mb-6">简约中性灰色系配色系统</h1>
                <p class="text-lg md:text-xl text-neutral-500 mb-8 text-balance">以优雅的灰色调为基础，辅以精心挑选的强调色，打造简约、专业且时尚的视觉体验。</p>
                <div class="flex flex-col sm:flex-row justify-center gap-4">
                    <a href="#colors" class="px-6 py-3 bg-accent-blue text-white font-medium rounded-md hover:bg-accent-blue/90 transition-colors">
                        查看配色
                    </a>
                    <a href="#components" class="px-6 py-3 bg-neutral-100 text-neutral-700 font-medium rounded-md hover:bg-neutral-200 transition-colors">
                        组件示例
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- 配色系统展示 -->
    <section id="colors" class="py-16 bg-neutral-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-neutral-800 mb-4">中性灰色配色系统</h2>
                <p class="text-neutral-500 max-w-2xl mx-auto">精心设计的灰色梯度，从最浅到最深，满足各种UI元素的需求，确保视觉层次清晰且和谐统一。</p>
            </div>
            
            <!-- 中性灰色系列 -->
            <div class="mb-16">
                <h3 class="text-xl font-semibold text-neutral-700 mb-6 text-center">中性灰色系列</h3>
                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-10 gap-4">
                    <!-- 浅灰色 -->
                    <div class="color-swatch bg-neutral-50 border border-neutral-200 rounded-lg p-4 flex flex-col items-center">
                        <div class="w-full aspect-square bg-neutral-50 rounded mb-3 border border-neutral-200"></div>
                        <span class="text-sm font-medium text-neutral-700">neutral-50</span>
                        <span class="text-xs text-neutral-500">#fafafa</span>
                    </div>
                    
                    <div class="color-swatch bg-white border border-neutral-200 rounded-lg p-4 flex flex-col items-center">
                        <div class="w-full aspect-square bg-neutral-100 rounded mb-3"></div>
                        <span class="text-sm font-medium text-neutral-700">neutral-100</span>
                        <span class="text-xs text-neutral-500">#f5f5f5</span>
                    </div>
                    
                    <div class="color-swatch bg-white border border-neutral-200 rounded-lg p-4 flex flex-col items-center">
                        <div class="w-full aspect-square bg-neutral-200 rounded mb-3"></div>
                        <span class="text-sm font-medium text-neutral-700">neutral-200</span>
                        <span class="text-xs text-neutral-500">#e5e5e5</span>
                    </div>
                    
                    <div class="color-swatch bg-white border border-neutral-200 rounded-lg p-4 flex flex-col items-center">
                        <div class="w-full aspect-square bg-neutral-300 rounded mb-3"></div>
                        <span class="text-sm font-medium text-neutral-700">neutral-300</span>
                        <span class="text-xs text-neutral-500">#d4d4d4</span>
                    </div>
                    
                    <div class="color-swatch bg-white border border-neutral-200 rounded-lg p-4 flex flex-col items-center">
                        <div class="w-full aspect-square bg-neutral-400 rounded mb-3"></div>
                        <span class="text-sm font-medium text-neutral-700">neutral-400</span>
                        <span class="text-xs text-neutral-500">#a3a3a3</span>
                    </div>
                    
                    <div class="color-swatch bg-white border border-neutral-200 rounded-lg p-4 flex flex-col items-center">
                        <div class="w-full aspect-square bg-neutral-500 rounded mb-3"></div>
                        <span class="text-sm font-medium text-neutral-700">neutral-500</span>
                        <span class="text-xs text-neutral-500">#737373</span>
                    </div>
                    
                    <div class="color-swatch bg-white border border-neutral-200 rounded-lg p-4 flex flex-col items-center">
                        <div class="w-full aspect-square bg-neutral-600 rounded mb-3"></div>
                        <span class="text-sm font-medium text-neutral-700">neutral-600</span>
                        <span class="text-xs text-neutral-500">#525252</span>
                    </div>
                    
                    <div class="color-swatch bg-white border border-neutral-200 rounded-lg p-4 flex flex-col items-center">
                        <div class="w-full aspect-square bg-neutral-700 rounded mb-3"></div>
                        <span class="text-sm font-medium text-neutral-700">neutral-700</span>
                        <span class="text-xs text-neutral-500">#404040</span>
                    </div>
                    
                    <div class="color-swatch bg-neutral-800 border border-neutral-700 rounded-lg p-4 flex flex-col items-center">
                        <div class="w-full aspect-square bg-neutral-800 rounded mb-3 border border-neutral-700"></div>
                        <span class="text-sm font-medium text-white">neutral-800</span>
                        <span class="text-xs text-neutral-400">#262626</span>
                    </div>
                    
                    <div class="color-swatch bg-neutral-900 border border-neutral-800 rounded-lg p-4 flex flex-col items-center">
                        <div class="w-full aspect-square bg-neutral-900 rounded mb-3 border border-neutral-800"></div>
                        <span class="text-sm font-medium text-white">neutral-900</span>
                        <span class="text-xs text-neutral-400">#171717</span>
                    </div>
                </div>
            </div>
            
            <!-- 强调色系列 -->
            <div>
                <h3 class="text-xl font-semibold text-neutral-700 mb-6 text-center">强调色系列</h3>
                <div class="grid grid-cols-2 md:grid-cols-3 gap-4 max-w-2xl mx-auto">
                    <div class="color-swatch bg-white border border-neutral-200 rounded-lg p-4 flex flex-col items-center">
                        <div class="w-full aspect-square bg-accent-blue rounded mb-3"></div>
                        <span class="text-sm font-medium text-neutral-700">accent-blue</span>
                        <span class="text-xs text-neutral-500">#3b82f6</span>
                    </div>
                    
                    <div class="color-swatch bg-white border border-neutral-200 rounded-lg p-4 flex flex-col items-center">
                        <div class="w-full aspect-square bg-accent-slate rounded mb-3"></div>
                        <span class="text-sm font-medium text-neutral-700">accent-slate</span>
                        <span class="text-xs text-neutral-500">#64748b</span>
                    </div>
                    
                    <div class="color-swatch bg-white border border-neutral-200 rounded-lg p-4 flex flex-col items-center">
                        <div class="w-full aspect-square bg-accent-amber rounded mb-3"></div>
                        <span class="text-sm font-medium text-neutral-700">accent-amber</span>
                        <span class="text-xs text-neutral-500">#f59e0b</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 组件示例 -->
    <section id="components" class="py-16 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-neutral-800 mb-4">组件配色示例</h2>
                <p class="text-neutral-500 max-w-2xl mx-auto">展示如何在各种UI组件中应用这套中性灰色配色系统，保持整体视觉的一致性。</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
                <!-- 按钮组件 -->
                <div class="bg-neutral-50 p-6 rounded-lg border border-neutral-200">
                    <h3 class="text-lg font-semibold text-neutral-800 mb-4">按钮组件</h3>
                    <div class="flex flex-wrap gap-3">
                        <button class="px-4 py-2 bg-accent-blue text-white rounded-md hover:bg-accent-blue/90 transition-colors">
                            主要按钮
                        </button>
                        <button class="px-4 py-2 bg-neutral-800 text-white rounded-md hover:bg-neutral-700 transition-colors">
                            次要按钮
                        </button>
                        <button class="px-4 py-2 bg-white text-neutral-700 border border-neutral-300 rounded-md hover:bg-neutral-50 transition-colors">
                             outline按钮
                        </button>
                        <button class="px-4 py-2 bg-neutral-100 text-neutral-600 rounded-md hover:bg-neutral-200 transition-colors">
                            文本按钮
                        </button>
                        <button class="px-4 py-2 bg-neutral-100 text-neutral-400 rounded-md cursor-not-allowed">
                            禁用按钮
                        </button>
                    </div>
                </div>
                
                <!-- 表单组件 -->
                <div class="bg-neutral-50 p-6 rounded-lg border border-neutral-200">
                    <h3 class="text-lg font-semibold text-neutral-800 mb-4">表单组件</h3>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-neutral-700 mb-1">输入框</label>
                            <input type="text" placeholder="请输入内容" class="w-full px-3 py-2 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent-blue/50 focus:border-accent-blue transition-colors">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-neutral-700 mb-1">下拉选择</label>
                            <select class="w-full px-3 py-2 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent-blue/50 focus:border-accent-blue transition-colors">
                                <option>选项一</option>
                                <option>选项二</option>
                                <option>选项三</option>
                            </select>
                        </div>
                        <div class="flex items-center">
                            <input type="checkbox" id="checkbox" class="w-4 h-4 text-accent-blue border-neutral-300 rounded focus:ring-accent-blue">
                            <label for="checkbox" class="ml-2 text-sm text-neutral-700">复选框</label>
                        </div>
                        <div class="flex items-center">
                            <input type="radio" name="radio" id="radio1" class="w-4 h-4 text-accent-blue border-neutral-300 focus:ring-accent-blue">
                            <label for="radio1" class="ml-2 text-sm text-neutral-700">单选按钮 1</label>
                        </div>
                        <div class="flex items-center">
                            <input type="radio" name="radio" id="radio2" class="w-4 h-4 text-accent-blue border-neutral-300 focus:ring-accent-blue">
                            <label for="radio2" class="ml-2 text-sm text-neutral-700">单选按钮 2</label>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- 卡片组件 -->
                <div class="bg-neutral-50 p-6 rounded-lg border border-neutral-200">
                    <h3 class="text-lg font-semibold text-neutral-800 mb-4">卡片组件</h3>
                    <div class="space-y-4">
                        <div class="bg-white border border-neutral-200 rounded-lg overflow-hidden shadow-sm">
                            <div class="p-4 border-b border-neutral-100">
                                <h4 class="font-medium text-neutral-800">基础卡片</h4>
                            </div>
                            <div class="p-4">
                                <p class="text-neutral-600 text-sm">这是一个基础卡片示例，使用白色背景和浅灰色边框，营造简洁的视觉效果。</p>
                            </div>
                        </div>
                        
                        <div class="bg-neutral-800 rounded-lg overflow-hidden text-white">
                            <div class="p-4 border-b border-neutral-700">
                                <h4 class="font-medium">深色卡片</h4>
                            </div>
                            <div class="p-4">
                                <p class="text-neutral-300 text-sm">这是一个深色卡片示例，使用深灰色背景，适合展示需要突出的内容。</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 状态与提示 -->
                <div class="bg-neutral-50 p-6 rounded-lg border border-neutral-200">
                    <h3 class="text-lg font-semibold text-neutral-800 mb-4">状态与提示</h3>
                    <div class="space-y-3">
                        <div class="p-3 bg-accent-blue/10 border border-accent-blue/20 rounded-md flex items-start">
                            <i class="fa fa-info-circle text-accent-blue mt-0.5 mr-2"></i>
                            <p class="text-sm text-neutral-700">信息提示：这是一条普通的信息提示内容。</p>
                        </div>
                        <div class="p-3 bg-accent-amber/10 border border-accent-amber/20 rounded-md flex items-start">
                            <i class="fa fa-exclamation-triangle text-accent-amber mt-0.5 mr-2"></i>
                            <p class="text-sm text-neutral-700">警告提示：请注意，这是一条警告信息。</p>
                        </div>
                        <div class="p-3 bg-green-50 border border-green-200 rounded-md flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-0.5 mr-2"></i>
                            <p class="text-sm text-neutral-700">成功提示：操作已成功完成。</p>
                        </div>
                        <div class="p-3 bg-red-50 border border-red-200 rounded-md flex items-start">
                            <i class="fa fa-times-circle text-red-500 mt-0.5 mr-2"></i>
                            <p class="text-sm text-neutral-700">错误提示：操作失败，请重试。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 应用展示 -->
    <section id="application" class="py-16 bg-neutral-800 text-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">配色系统应用展示</h2>
                <p class="text-neutral-400 max-w-2xl mx-auto">展示在实际界面中如何应用这套中性灰色配色系统，打造简约时尚的视觉体验。</p>
            </div>
            
            <div class="bg-neutral-900 rounded-xl overflow-hidden shadow-xl">
                <!-- 应用导航 -->
                <div class="border-b border-neutral-800 px-6 py-4 flex items-center justify-between">
                    <div class="flex items-center space-x-6">
                        <div class="font-semibold">Dashboard</div>
                        <div class="text-neutral-400 text-sm">Projects</div>
                        <div class="text-neutral-400 text-sm">Tasks</div>
                        <div class="text-neutral-400 text-sm">Calendar</div>
                    </div>
                    <div class="flex items-center space-x-4">
                        <button class="p-2 text-neutral-400 hover:text-white transition-colors">
                            <i class="fa fa-bell"></i>
                        </button>
                        <div class="h-8 w-8 rounded-full bg-accent-blue flex items-center justify-center text-sm font-medium">JD</div>
                    </div>
                </div>
                
                <!-- 应用内容 -->
                <div class="p-6">
                    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
                        <div>
                            <h3 class="text-xl font-semibold">Recent Projects</h3>
                            <p class="text-neutral-400 text-sm mt-1">View and manage your current projects</p>
                        </div>
                        <button class="mt-4 md:mt-0 px-4 py-2 bg-accent-blue text-white text-sm rounded-md hover:bg-accent-blue/90 transition-colors">
                            <i class="fa fa-plus mr-1"></i> New Project
                        </button>
                    </div>
                    
                    <!-- 项目卡片网格 -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                        <!-- 项目卡片1 -->
                        <div class="bg-neutral-800 rounded-lg p-4 border border-neutral-700 hover:border-neutral-600 transition-colors">
                            <div class="flex justify-between items-start mb-3">
                                <h4 class="font-medium">Website Redesign</h4>
                                <span class="text-xs px-2 py-1 bg-accent-blue/20 text-accent-blue rounded-full">In Progress</span>
                            </div>
                            <p class="text-neutral-400 text-sm mb-4">Redesign the main website homepage and product pages</p>
                            <div class="flex justify-between items-center">
                                <div class="flex -space-x-2">
                                    <div class="h-6 w-6 rounded-full bg-neutral-600 border-2 border-neutral-800"></div>
                                    <div class="h-6 w-6 rounded-full bg-accent-slate border-2 border-neutral-800"></div>
                                    <div class="h-6 w-6 rounded-full bg-accent-amber border-2 border-neutral-800"></div>
                                </div>
                                <span class="text-xs text-neutral-500">Due in 5 days</span>
                            </div>
                        </div>
                        
                        <!-- 项目卡片2 -->
                        <div class="bg-neutral-800 rounded-lg p-4 border border-neutral-700 hover:border-neutral-600 transition-colors">
                            <div class="flex justify-between items-start mb-3">
                                <h4 class="font-medium">Mobile App UI</h4>
                                <span class="text-xs px-2 py-1 bg-green-500/20 text-green-400 rounded-full">Completed</span>
                            </div>
                            <p class="text-neutral-400 text-sm mb-4">Design new user interface for the mobile application</p>
                            <div class="flex justify-between items-center">
                                <div class="flex -space-x-2">
                                    <div class="h-6 w-6 rounded-full bg-neutral-600 border-2 border-neutral-800"></div>
                                    <div class="h-6 w-6 rounded-full bg-accent-blue border-2 border-neutral-800"></div>
                                </div>
                                <span class="text-xs text-neutral-500">Completed</span>
                            </div>
                        </div>
                        
                        <!-- 项目卡片3 -->
                        <div class="bg-neutral-800 rounded-lg p-4 border border-neutral-700 hover:border-neutral-600 transition-colors">
                            <div class="flex justify-between items-start mb-3">
                                <h4 class="font-medium">Brand Guidelines</h4>
                                <span class="text-xs px-2 py-1 bg-accent-amber/20 text-accent-amber rounded-full">Review</span>
                            </div>
                            <p class="text-neutral-400 text-sm mb-4">Update brand guidelines with new color palette</p>
                            <div class="flex justify-between items-center">
                                <div class="flex -space-x-2">
                                    <div class="h-6 w-6 rounded-full bg-neutral-600 border-2 border-neutral-800"></div>
                                    <div class="h-6 w-6 rounded-full bg-accent-slate border-2 border-neutral-800"></div>
                                    <div class="h-6 w-6 rounded-full bg-accent-blue border-2 border-neutral-800"></div>
                                    <div class="h-6 w-6 rounded-full bg-accent-amber border-2 border-neutral-800"></div>
                                </div>
                                <span class="text-xs text-neutral-500">Due today</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-neutral-100 py-12 border-t border-neutral-200">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <span class="text-lg font-semibold text-neutral-800">Neutral<span class="text-accent-blue">UI</span></span>
                    <p class="text-neutral-500 text-sm mt-2">简约时尚的中性灰色配色系统</p>
                </div>
                <div class="flex space-x-6">
                    <a href="#" class="text-neutral-500 hover:text-accent-blue transition-colors">
                        <i class="fa fa-github text-xl"></i>
                    </a>
                    <a href="#" class="text-neutral-500 hover:text-accent-blue transition-colors">
                        <i class="fa fa-twitter text-xl"></i>
                    </a>
                    <a href="#" class="text-neutral-500 hover:text-accent-blue transition-colors">
                        <i class="fa fa-dribbble text-xl"></i>
                    </a>
                </div>
            </div>
            <div class="mt-8 pt-8 border-t border-neutral-200 text-center text-neutral-500 text-sm">
                &copy; 2023 NeutralUI. 简约时尚的中性灰色配色系统展示。
            </div>
        </div>
    </footer>
</body>
</html>
